<template>
  <base-dialog
    title="数据权限配置"
    ref="baseDialog"
    @handleClose="handleClose"
    @handleSubmit="handleSubmit"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="mini">
      <el-row>
        <el-col :span="24">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="form.roleName" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="角色编码" prop="roleCode">
            <el-input v-model="form.roleCode" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="数据权限" prop="dataScope">
            <el-select
              :style="{ width: '100%' }"
              v-model="form.dataScope"
              placeholder="请选择数据权限"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in applicationList"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="form.dataScope == '5'">
        <el-col :span="24">
          <el-form-item>
            <el-tree
              ref="tree"
              :data="regionalData"
              show-checkbox
              check-strictly
              node-key="id"
              :default-checked-keys="defKeys"
              :props="defaultProps"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </base-dialog>
</template>

<script>
import { setRoleData } from "@/api/system/role"
import { treeList } from "@/api/system/dept"
import { DATASCOPE } from "@/utils/settings"
export default {
  data() {
    return {
      form: {},
      rules: {
        dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }]
      },
      applicationList: DATASCOPE,
      defKeys: [], // 默认选中的数组
      regionalData: [], //树结构
      defaultProps: {
        children: "children",
        label: "deptName"
      }
    }
  },
  methods: {
    async init(item) {
      this.$refs.baseDialog.dialogVisible = true
      if (item) {
        this.form = JSON.parse(JSON.stringify(item))
      }
      const res = await treeList()
      this.regionalData = res.data

      // const { data } = await getRoleDataById(item.id)
      this.form.dataScope = item.dataScope
      this.defKeys = item.dataScopeDeptIds
    },
    handleClose() {
      this.form = {}
      this.defKeys = []
      this.regionalData = []
      this.$refs.baseDialog.dialogVisible = false
    },
    // 提交表单
    handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const { id, dataScope } = this.form
          const data = {
            roleId: id,
            dataScope,
            deptIds: this.$refs.tree ? this.$refs.tree.getCheckedKeys() : []
          }
          await setRoleData(data)
          this.$message.success("数据权限配置成功")
          this.$emit("updatePage")
          this.handleClose()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form {
  overflow: hidden;
  margin-bottom: 30px;
}
</style>
